<template>
  <div class="wrapper">
    <router-link tag="div" to="/addressList" class="address">
      <div v-if="currentAddress.id">
        <p>{{ currentAddress.name }}</p>
        <p>{{ currentAddress.mobile }}</p>
        <p>{{ currentAddress.province }}{{ currentAddress.city }}{{ currentAddress.district }}{{ currentAddress.address }}</p>
      </div>
      <div v-else>
        <p>请点击添加新的收货地址</p>
      </div>
    </router-link>
    <div class="goods-list">
      <p class="title">有惊喜</p>
      <GoodsItem
        :img="goods.url"
        :title="goods.title"
        :guage="goods.guageName"
        :price="goods.price"
        :count="goods.num"
      ></GoodsItem>
    </div>
    <div class="remark">
      <p>买家留言</p>
      <textarea maxlength="50" placeholder="50字以内(选填)" v-model="remark"></textarea>
    </div>
    <div class="total">
      <div>
        <h3>小计</h3>
        <h5>￥{{ totalPrice | money }}</h5>
      </div>
      <div>
        <h3>运费</h3>
        <h5>￥15.00</h5>
      </div>
    </div>
    <div class="confirm">
      <p>
        需付：
        <span>{{ totalPrice | money }}元</span>
      </p>
      <button class="pay" @click="createOrder">立即支付</button>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import GoodsItem from '@/components/goodsItem/GoodsItem.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'OrderConfirmNow',
    components: {
      GoodsItem
    },
    created() {
      this.getAddress()
    },
    data() {
      return {
        goods: this.$store.state.payGoods,
        addressList: [],
        remark: ''
      }
    },
    computed: {
      ...mapState(['currentAddress', 'openId', 'userState']),
      totalPrice() {
        let total = this.goods.price * this.goods.num
        return total
      },
      cart_id() {
        let arr = this.list.map(item => {
          return item.id
        })
        return arr.toString()
      },
      apiUrl() {
        return this.userState == 0 ? '/v1/merchant/orders' : '/v1/platform/purchase'
      },
      paramPrice() {
        return this.userState == 0 ? { price: this.goods.price } : { m_price: this.goods.price }
      }
    },
    methods: {
      async getAddress() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/address/list',
          method: 'POST',
          data: {
            size: 1000,
            current: 1,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.addressList = data.items
          if(!this.$store.state.currentAddress.id) {
            if(this.addressList.length > 0) {
              let address = this.addressList.filter(item => {
                return item.is_default == '0'
              })
              if(address.length > 0) {    //有默认地址
                address = address[0]
              } else {  //无默认地址
                address = this.addressList[0]
              }
              this.$store.commit('switchAddress', address)
            }else{
              this.$store.commit('switchAddress', [])
            }
          }
        }
      },
      createOrder() {
        this._createOrder()
      },  
      _createOrder: _.throttle(async function() {
          let { data: { code, data } } = await this.$axios({
            url: this.apiUrl,
            method: 'POST',
            data: {
              goods_id: this.goods.goods_id,
              hao_id: this.goods.guageId,
              order_num: this.goods.num,
              ...this.paramPrice,
              address_id: this.currentAddress.id,
              remark: this.remark,
              openid: this.openId
            }
          })
          if (code === 0) {
            this.$store.commit('payOrder', data.total[0])
            //console.log(data.total)
            this.$router.replace('/payment')
          }
      }, 2000, { trailing: false })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    min-height: 100vh;
    background: #eee;
    padding-top: 0.2rem;
    padding-bottom: 1.7rem;
  }
  .address {
    display: flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.2rem;
    margin-bottom: 0.2rem;
    background: #fff;
    div {
      flex: 1;
      font-size: 0.24rem;
      p {
        margin-bottom: 0.06rem;
      }
    }
  }
  .goods-list {
    padding: 0 0.2rem;
    background: #FFF;
    .title {
      padding: 0.1rem 0;
      font-size: 0.24rem;
      border-bottom: 1px solid $bgGray;
    }
  }
  .remark {
    display: flex;
    margin-top: 0.2rem;
    padding: 0.2rem;
    background: #fff;
    p {
      flex: 0 0 1.5rem;
      width: 1.5rem;
      font-size: 0.24rem;
    }
    textarea {
      flex: 1;
      height: 1rem;
      font-size: 0.24rem;
      resize: none;
    }
  }
  .total {
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    background: #fff;
    div {
      display: flex;
      height: 0.8rem;
      line-height: 0.8rem;
      border-bottom: 1px solid $bgGray;
      h3 {
        flex: 1;
        font-size: 0.24rem;
      }
      h5 {
        flex: 0 0 1rem;
        text-align: right;
        font-size: 0.24rem;
      }
    }
  }
  .confirm {
    position: fixed;
    bottom: 50px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 1rem;
    background: #fff;
    box-shadow: -2px 0 3px 0 #eee;
    p {
      flex: 1;
      padding-right: 0.1rem;
      font-size: 0.28rem;
      text-align: right;
      span {
        color: $colorRed;
      }
    }
    .pay {
      flex: 0 0 2rem;
      width: 2rem;
      height: 1rem;
      background: $colorRed;
      border: none;
      font-size: 0.28rem;
      color: #fff;
    }
  }
</style>
